<template>
  <div>
    <!-- 查看题目信息 -->
    <el-dialog
      title="试题预览"
      :append-to-body="true"
      :visible.sync="dialogVisible"
      width="65%"
      :before-close="handleClose"
    >
      <hr
        style="
          width: 104%;
          margin-left: -22px;
          background-color: #ccc;
          height: 0.2px;
          border: none;
        "
      />
      <div class="order">
        <span class="line"></span>
        <span class="txt">基本信息</span>
        <span class="line"></span>
      </div>
      <el-row style="padding: 10px">
        <el-col :span="9"> 试题编号:{{ singleQuest.quest_num }} </el-col>
        <el-col :span="5">
          试题类型:{{
            singleQuest.quest_type === 1
              ? "单选题"
              : singleQuest.quest_type === 2
              ? "多选题"
              : singleQuest.quest_type === 3
              ? "判断题"
              : "简答题"
          }}
        </el-col>
        <el-col :span="5"> 归属学科:{{ singleQuest.subject_name }} </el-col>
        <el-col :span="5"> 归属目录:{{ singleQuest.directory_name }} </el-col>
      </el-row>
      <el-row style="padding: 10px">
        <el-col :span="9">
          标签信息:<span
            type="danger"
            size="mini"
            v-for="(item, index) in singleQuest.tag_info"
            :key="index"
          >
            {{ item }}</span
          >
        </el-col>
        <el-col :span="5">
          发布状态:
          <el-tag size="mini">{{
            singleQuest.show_state === 1 ? "上架" : "下架"
          }}</el-tag>
        </el-col>
        <el-col :span="5"> 审核人:暂无</el-col>
        <el-col :span="5">
          审核状态:
          <el-tag size="mini" type="success">{{
            singleQuest.check_state === 1 ? "为通过" : "通过"
          }}</el-tag>
        </el-col>
      </el-row>
      <el-row style="padding: 10px">
        <el-col :span="9"> 审核意见:{{ singleQuest.check_remarks }} </el-col>
        <el-col :span="5"> 创建人:{{ singleQuest.create_name }} </el-col>
        <el-col :span="5">
          难度系数:{{
            singleQuest.difficulty === 1
              ? "简单"
              : singleQuest.difficulty === 2
              ? "中等"
              : "较难"
          }}
        </el-col>
        <el-col :span="5"
          >发布时间:{{
            new Date(singleQuest.created_at)
              .toLocaleDateString()
              .replace(/\//g, "-")
          }}
        </el-col>
      </el-row>
      <div class="order">
        <span class="line"></span>
        <span class="txt">试题信息</span>
        <span class="line"></span>
      </div>
      题干信息:
      <span
        id="color"
        style="padding: 10px"
        v-html="singleQuest.question"
      ></span>
      <br />
      <br />
      <!-- 这里要判断四种类型 -->
      选项信息:
      <span
        v-if="singleQuest.quest_type === 1"
        id="color"
        style="padding: 10px"
        v-html="singleQuest.quest_options"
      ></span>
      <span
        v-else-if="singleQuest.quest_type === 2"
        id="color"
        style="padding: 10px"
      >
        <el-checkbox-group v-model="checkList">
          <el-checkbox
            v-for="(item, index) in JSON.parse(singleQuest.quest_options)"
            :key="index"
            :label="item.code"
            >{{ item.code }} &nbsp;&nbsp;&nbsp;{{ item.content }}</el-checkbox
          >
        </el-checkbox-group>
      </span>
      <span
        v-else-if="singleQuest.quest_type === 3"
        id="color"
        style="padding: 10px"
      >
        <el-checkbox-group v-model="checkList">
          <el-checkbox
            v-for="(item, index) in JSON.parse(singleQuest.quest_options)"
            :key="index"
            :label="item.code"
            >{{ item.code }} &nbsp;&nbsp;&nbsp;{{ item.content }}</el-checkbox
          >
        </el-checkbox-group>
      </span>
      <span
        v-else-if="singleQuest.quest_type === 4"
        id="color"
        style="padding: 10px"
      >
        简答题，😎无选项🗾
      </span>
      <div class="order">
        <span class="line"></span>
        <span class="txt">答案信息</span>
        <span class="line"></span>
      </div>
      正确答案:
      <p style="padding: 10px" id="color">
        <span
          v-if="singleQuest.quest_type === 4"
          v-html="singleQuest.quest_answer"
        ></span>
        <span v-else>
          {{ singleQuest.quest_answer }}
        </span>
      </p>
      <br />
      <br />
      答案解析：{{
        singleQuest.quest_remark ? "" : "🧢🎃🥙🚲🈲省略......🈲🈲🈲🈲🈲"
      }}
      <p v-html="singleQuest.quest_remark"></p>
      <br />
      <br />
      <br />
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "lookQuest",
  props: {
    singleQuest: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      dialogVisible: false,
    };
  },
  computed: {
    checkList() {
      return this.singleQuest.quest_answer.split(",");
    },
  },
  methods: {
    handleClose(done) {
      this.dialogVisible = false;
    },
  },
};
</script>

<style scope>
#color {
  color: #409eff;
}
P {
  display: inline;
}
.order {
  height: 60px;
  line-height: 60px;
  text-align: center;
}
.order .line {
  display: inline-block;
  width: 430px;
  border-top: 1px solid #ccc;
}
.order .txt {
  color: #686868;
  vertical-align: -4px;
}
</style>